6.hexo插件篇（必看）

您所在的位置：网站首页 › hexo 图床 › 6.hexo插件篇（必看）

6.hexo插件篇（必看）

2023-11-18 00:22| 来源: 网络整理| 查看: 265

1>安装插件说明

如果应用官网的主题你会发现，有可能出现打不开的情况，这是由于有些主题使用的插件，本地并没有安装导致的报错。所以本篇文章为补充说明篇。（无问题的可以跳过）

2>常用的插件代码高亮（建议安装）

由于 Hexo 自带的代码高亮主题显示不好看，所以主题中使用到了 hexo-prism-plugin 的 Hexo 插件来做代码高亮，安装命令如下：

npm i -S hexo-prism-plugin

然后，修改 Hexo 根目录下 _config.yml 文件中 highlight.enable 的值为 false，并新增 prism 插件相关的配置，主要配置如下：

highlight: enable: false line_number: true auto_detect: false tab_replace: false wrap: true hljs: false prism_plugin: mode: 'preprocess' # realtime/preprocess theme: 'tomorrow' line_number: false # default false custom_css:搜索（建议安装）

本主题中还使用到了 hexo-generator-search 的 Hexo 插件来做内容搜索，安装命令如下：

npm install hexo-generator-search --save

在 Hexo 根目录下的 _config.yml 文件中，新增以下的配置项：

search: path: search.xml; field: post;

###

文章字数统计插件（建议安装）（使用了 halo 主题则必须安装）

如果你想要在文章中显示文章字数、阅读时长信息，可以安装 hexo-wordcount插件。安装命令如下：

npm i --save hexo-wordcount

然后只需在本主题下的 _config.yml 文件中，将各个文章字数相关的配置激活即可： (此处注意源文档的 postInfo 是错的，应该为 post_wordcount)

post_wordcount: date: true # 发布日期 update: true # 更新日期 wordCount: true # 文章字数统计 totalCount: true # 站点总文章字数 min2read: true # 文章阅读时长 readCount: true # 文章阅读次数添加代码压缩（建议安装）

hexo-neat插件实现压缩代码，底层是通过 gulp 来实现的。但是这个插件是有 Bug 的：

压缩 md 文件会使 markdown 语法的代码块消失会删除全角空格

在博客站点根目录执行安装代码：

npm install hexo-neat --save

紧接着在站点根目录下的配置文件添加如下代码：

neat_enable: true neat_html: enable: true exclude: neat_css: enable: true exclude: - '*.min.css' neat_js: enable: true mangle: true output: compress: exclude: - '*.min.js'

然后直接 hexo cl&&hexo g 就可以了，会自动压缩文件。补充：为了解决以上 Bug，对于halo主题（其他主题自行解决）需要将以上默认配置修改为：

#hexo-neat 优化提速插件（去掉HTML、css、js的blank字符） neat_enable: true neat_html: enable: true exclude: - '**/*.md' neat_css: enable: true exclude: - '**/*.min.css' neat_js: enable: true mangle: true output: compress: exclude: - '**/*.min.js' - '**/**/instantpage.js' - '**/matery.js'

###

外链跳转插件 hexo-external-link（可选安装）（使用了 halo 主题则必须安装）

hexo-external-link是一个跳转外链相关插件。自动为所有 html 文件中外链的 a 标签生成对应的属性。比如设置target=’_blank’, rel=’external nofollow noopener noreferrer’告诉搜索引擎这是外部链接,不要将该链接计入权重。同时自动生成外链跳转页面,默认在根目录下 go.html;

安装:

npm install hexo-external-link --save

配置插件在 Hexo 根目录的_config.yml 文件中添加如下配置。

hexo_external_link: enable: true enable_base64_encode: true url_param_name: 'u' html_file_name: 'go.html' target_blank: true link_rel: 'external nofollow noopener noreferrer' domain: 'your_domain' # 如果开启了防盗链 safety_chain: trueenable：是否开启 hexo_external_link 插件 - 默认 falseenable_base64_encode：是否对跳转 url 使用 base64 编码 - 默认 fasleurl_param_name：url 参数名,在跳转到外链传递给 html_file_name 的参数名 - 默认 ‘u’html_file_name：跳转到外链的页面文件路径 - 默认 ‘go.html’target_blank：是否为外链的 a 标签添加 target=’_blank’ - 默认 truelink_rel：设置外链的 a 标签的 rel 属性 - 默认 ‘external nofollow noopener noreferrer’domain：如果开启了防盗链,除了 localhost 和 domain 之外调用会跳到主页,同时也是判断链接是否为外链的依据 - 默认 window.location.hostsafety_chain：go.html 为了防止外链盗用对域名进行的判断 - 默认 false 即关闭防盗链

###

添加 RSS 订阅支持（可选安装）（使用了 halo 主题则必须安装）

本主题中还使用到了 hexo-generator-feed 的 Hexo 插件来做 RSS，安装命令如下：

npm install hexo-generator-feed --save

在 Hexo 根目录下的 _config.yml 文件中，新增以下的配置项：

feed: type: atom; path: atom.xml; limit: 20; hub: content: content_limit: 140; content_limit_delim: " "; order_by: -date;添加 sitemap 站点地图（可选安装）（使用了 halo 主题则必须安装）

本主题中还使用到了 hexo-generator-sitemap 的 Hexo 插件来做 Sitemap，安装命令如下：

npm install hexo-generator-sitemap --save

访问地址：/sitemap.xml

中文链接转拼音（可选安装）

如果你的文章名称是中文的，那么 Hexo 默认生成的永久链接也会有中文，这样不利于 SEO，且 gitment 评论对中文链接也不支持。我们可以用 hexo-permalink-pinyin Hexo 插件使在生成文章时生成中文拼音的永久链接。这里为可选安装，因为我希望使用urlname进行连接访问，中文链接转拼音由一个缺点就是当文章名字过长会显示十分臃肿。urlname的方式见下文。安装命令如下：

npm i hexo-permalink-pinyin --save

在 Hexo 根目录下的 _config.yml 文件中，新增以下的配置项：

permalink_pinyin: enable: true separator: '-' # default: '-'

注：除了此插件外，hexo-abbrlink 插件也可以生成非中文的链接。

添加 emoji 表情支持（可选安装）

本主题新增了对emoji表情的支持，使用到了 hexo-filter-github-emojis 的 Hexo 插件来支持 emoji表情的生成，把对应的markdown emoji语法（::,例如：:smile:）转变成会跳跃的emoji表情，安装命令如下：

npm install hexo-filter-github-emojis --save

在 Hexo 根目录下的 _config.yml 文件中，新增以下的配置项：

githubEmojis: enable: true className: github-emoji inject: true styles: customEmojis:deploy 发布插件（可选安装）（部署到 github 需要安装）

如果你想通过deploy的方式进行推送public文件夹到托管网站，你需要安装

npm install hexo-deployer-git --save

当然你也可以选择不装，使用 Github Actions、docker 等方式执行 hexo clean && hexo g 重新生成博客文件，然后在 public 文件夹中即可看到 atom.xml 文件，说明你已经安装成功了。

添加 DaoVoice 在线聊天功能（可选的）

前往 DaoVoice 官网注册并且获取 app_id，并将 app_id 填入主题的 _config.yml 文件中。

添加 Tidio 在线聊天功能（可选的）

前往 Tidio 官网注册并且获取 Public Key，并将 Public Key 填入主题的 _config.yml 文件中。

修改页脚

页脚信息可能需要做定制化修改，而且它不便于做成配置信息，所以可能需要你自己去再修改和加工。修改的地方在主题文件的 /layout/_partial/footer.ej``s 文件中，包括站点、使用的主题、访问量等。

修改社交链接

在主题的 _config.yml 文件中，默认支持 QQ、GitHub 和邮箱等的配置，你可以在主题文件的 /layout/_partial/social-link.ejs 文件中，新增、修改你需要的社交链接地址，增加链接可参考如下代码：

其中，社交图标（如：fa-github）你可以在 Font Awesome 中搜索找到。以下是常用社交图标的标识，供你参考：

Facebook: fab fa-facebookTwitter: fab fa-twitterGoogle-plus: fab fa-google-plusLinkedin: fab fa-linkedinTumblr: fab fa-tumblrMedium: fab fa-mediumSlack: fab fa-slackSina Weibo: fab fa-weiboWechat: fab fa-weixinQQ: fab fa-qqZhihu: fab fa-zhihu 注意: 本主题中使用的 Font Awesome 版本为 5.11.0。修改打赏的二维码图片

在主题文件的 source/medias/reward 文件中，你可以替换成你的的微信和支付宝的打赏二维码图片。

配置音乐播放器（可选的）

要支持音乐播放，就必须开启音乐的播放配置和音乐数据的文件。首先，在你的博客 source 目录下的 _data 目录（没有的话就新建一个）中新建 musics.json 文件，文件内容如下所示：

[ { name: "五月雨变奏电音", artist: "AnimeVibe", url: "http://xxx.com/music1.mp3", cover: "http://xxx.com/music-cover1.png", }, { name: "Take me hand", artist: "DAISHI DANCE,Cecile Corbel", url: "/medias/music/music2.mp3", cover: "/medias/music/cover2.png", }, { name: "Shape of You", artist: "J.Fla", url: "http://xxx.com/music3.mp3", cover: "http://xxx.com/music-cover3.png", }, ];

注：以上 JSON 中的属性：name、artist、url、cover 分别表示音乐的名称、作者、音乐文件地址、音乐封面。

然后，在主题的 _config.yml 配置文件中激活配置即可：

是否在首页显示音乐.# 是否在首页显示音乐. music: enable: true showTitle: false title: 听听音乐 fixed: false # 是否开启吸底模式 autoplay: false # 是否自动播放 theme: '#42b983' loop: 'all' # 音频循环播放, 可选值: 'all', 'one', 'none' order: 'list' # 音频循环顺序, 可选值: 'list', 'random' preload: 'auto' # 预加载，可选值: 'none', 'metadata', 'auto' volume: 0.7 # 默认音量，请注意播放器会记忆用户设置，用户手动设置音量后默认音量即失效 listFolded: false # 列表默认折叠 listMaxHeight: # 列表最大高度文章 Front-matter 介绍直接将themes/halo/config/scaffolds内所有内容拷贝到**Hexo根目录下**的scaffolds文件夹内替换或者自己重新修改，修改请参考下面Front-matter 选项详解

Front-matter 选项中的所有内容均为非必填的。但我仍然建议至少填写 title 、urlname 和 date 的值。

配置选项

默认值

描述

title

Markdown 的文件标题

文章标题，强烈建议填写此选项

date

文件创建时的日期时间

发布时间，强烈建议填写此选项，且最好保证全局唯一

author

根 _config.yml 中的 author

文章作者

img

featureImages 中的某个值

文章特征图，推荐使用图床(腾讯云、七牛云、又拍云等)来做图片的路径.如: [http://xxx.com/xxx.jpg](http://xxx.com/xxx.jpg)

top

true

推荐文章（文章是否置顶），如果 top 值为 true，则会作为首页推荐文章

cover

false

v1.0.2版本新增，表示该文章是否需要加入到首页轮播封面中

coverImg

无

v1.0.2版本新增，表示该文章在首页轮播封面需要显示的图片路径，如果没有，则默认使用文章的特色图片

password

无

文章阅读密码，如果要对文章设置阅读验证密码的话，就可以设置 password 的值，该值必须是用 SHA256 加密后的密码，防止被他人识破。前提是在主题的 config.yml 中激活了 verifyPassword 选项

urlname

index

文章访问路径，需要在Hexo根目录下_config.yml文件中使用permalink: :urlname/和permalink_defaults:

urlname: index

toc

true

permalink_defaults:是否开启 TOC，可以针对某篇文章单独关闭 TOC 的功能。前提是在主题的 config.yml 中激活了 toc 选项

mathjax

false

urlname: index 是否开启数学公式支持，本文章是否开启 mathjax，且需要在主题的 _config.yml 文件中也需要开启才行

summary

无

文章摘要，自定义的文章摘要内容，如果这个属性有值，文章卡片摘要就显示这段文字，否则程序会自动截取文章的部分内容作为摘要

tags

无

文章标签，一篇文章可以多个标签

keywords

文章标题

文章关键字，SEO 时需要

reprintPolicy

cc_by

文章转载规则，可以是 cc_by, cc_by_nd, cc_by_sa, cc_by_nc, cc_by_nc_nd, cc_by_nc_sa, cc0, noreprint 或 pay 中的一个

注意:

如果 img 属性不填写的话，文章特色图会根据文章标题的 hashcode 的值取余，然后选取主题中对应的特色图片，从而达到让所有文章都的特色图各有特色。date 的值尽量保证每篇文章是唯一的，因为本主题中 Gitalk 和 Gitment 识别 id 是通过 date 的值来作为唯一标识的。如果要对文章设置阅读验证密码的功能，不仅要在 Front-matter 中设置采用了 SHA256 加密的 password 的值，还需要在主题的 _config.yml 中激活了配置。有些在线的 SHA256 加密的地址，可供你使用：开源中国在线工具、chahuo、站长工具。您可以在文章 md 文件的 front-matter 中指定 reprintPolicy 来给单个文章配置转载规则

以下为文章的 Front-matter 示例。

自定制修改

在本主题的 _config.yml 中可以修改部分自定义信息，有以下几个部分：

菜单我的梦想首页的音乐播放器和视频播放器配置是否显示推荐文章名称和按钮配置favicon 和 Logo个人信息TOC 目录文章打赏信息复制文章内容时追加版权信息MathJax文章字数统计、阅读时长点击页面的’爱心’效果我的项目我的技能我的相册Gitalk、Gitment、Valine 和 disqus 评论配置不蒜子统计和谷歌分析（Google Analytics）默认特色图的集合。当文章没有设置特色图时，本主题会根据文章标题的 hashcode 值取余，来选择展示对应的特色图

我认为个人博客应该都有自己的风格和特色。如果本主题中的诸多功能和主题色彩你不满意，可以在主题中自定义修改，很多更自由的功能和细节点的修改难以在主题的 _config.yml 中完成，需要修改源代码才来完成。以下列出了可能对你有用的地方：

修改主题颜色

在主题文件的 /source/css/matery.css 文件中，搜索 .bg-color 来修改背景颜色：

/* 整体背景颜色，包括导航、移动端的导航、页尾、标签页等的背景颜色. */ .bg-color { background-image: linear-gradient(to right, #4cbf30 0%, #0f9d58 100%); } @-webkit-keyframes rainbow { /* 动态切换背景颜色. */ } @keyframes rainbow { /* 动态切换背景颜色. */ }修改 banner 图和文章特色图

你可以直接在 /source/medias/banner 文件夹中更换你喜欢的 banner 图片，主题代码中是每天动态切换一张，只需 7 张即可。如果你会 JavaScript 代码，可以修改成你自己喜欢切换逻辑，如：随机切换等，banner 切换的代码位置在 /layout/_partial/bg-cover-content.ejs 文件的代码中：

$(".bg-cover").css( "background-image", "url(/medias/banner/" + new Date().getDay() + ".jpg)" );

在 /source/medias/featureimages 文件夹中默认有 24 张特色图片，你可以再增加或者减少，并需要在 _config.yml 做同步修改。

修改文章访问路径 urlname

在Hexo根目录_config.yaml中添加以下配置

# permalink: :year/:month/:day/:title/ permalink: :urlname/ permalink_defaults: urlname: index全站 CDN

CDN 的全称是Content Delivery Network，即内容分发网络。CDN 是构建在网络之上的内容分发网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。CDN 的关键技术主要有内容存储和分发技术。——百度百科

放在 Github 的资源在国内加载速度比较慢，因此需要使用 CDN 加速来优化网站打开速度，jsDelivr + Github 便是免费且好用的 CDN，非常适合博客网站使用。

用法： https://cdn.jsdelivr.net/gh/你的用户名/你的仓库名@发布的版本号/文件路径

如： http://cdn.jsdelivr.net/gh/hongweifuture/hongweifuture.github.io/medias/featureimages/12.jpg 注意：版本号不是必需的，是为了区分新旧资源，如果不使用版本号，将会直接引用最新资源，如果需要版本，请创建releases然后按照格式添加当然最直接的办法就是使用 username/username.github.io/

【本文地址】

公司简介

联系我们